<template>
    <qly-base-page ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="0">
        <template #navbar>
            <qly-nav-bar :title="$t('common.balance')">
                <template #right>
                    <uni-icons type="search" size="28" @click="openSearch"/>
                </template>
            </qly-nav-bar>
        </template>
        <template #header>
            <view class="header-box">
                {{$t('common.amountReported')}}：
                12323({{$t('common.underReview')}})
                +3999({{$t('common.approved')}})
            </view>
        </template>
        
        <tr-search ref="searchRef" v-model="params" :search-params="searchParams" @search="search"/>
        
        <view>
            <tr-card v-for="(item,index) in 10" :key="index" margin="12rpx 18rpx" borderRadius="12rpx">
                <view class="card-row row-between">
                    <view>{{$t('common.advance')}}{{$t('common.date')}}：2025-05-05</view>
                    <view>
                        <up-tag text="审核中" size="mini"></up-tag>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view>{{$t('common.balance')}}{{$t('common.type')}}：现场收客</view>
                    <view>{{$t('common.numberGuests')}}：3999</view>
                </view>
                <view class="card-row row-between">
                    <view>{{$t('common.upload')}}{{$t('common.date')}}：2025-05-05 09:23:33</view>
                    <view>{{$t('common.amount')}}：3999</view>
                </view>
                <qly-grid-images :imageList="images" height="180rpx"/>
                <view class="red-text">驳回原因：拍照的具体金额不是很对，请重新核对后再申请</view>
                <up-gap height="2" bgColor="#f5f5f5" marginTop="12" marginBottom="12"></up-gap>
                
                <view  class="btns-box grid-gap24">
                    <view>
                        <up-tag :text="$t('common.reapply')" size="large" plain></up-tag>
                    </view>
                </view>
            </tr-card>
        </view>
    </qly-base-page>
    
    <qly-draggable >
        <view class="update-box" @tap="saveAdvance">
            {{$t('common.upload')}}
        </view>
    </qly-draggable>
</template>
<script setup>
const images=['https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',]

const searchRef = ref()
const params = ref({
    status: '',
    myPublishFlag: true
})
const searchParams = [
    {
        prop: 'daterange',
        label: '日期范围',
        type: 'daterange',
    },
    {
        prop: 'apply',
        label: '审核状态',
        type: 'checkbox',
        data: [
            {
                label: '审核中',
                value: '1'
            },
            {
                label: '审核通过',
                value: '2'
            },
            {
                label: '审核驳回',
                value: '3'
            },
        ]
    },
]

const openSearch=()=>{
    searchRef.value.open()
}

const search=()=>{
    console.log('search',params.value)
}

// 上传垫付信息
const saveAdvance=()=>{
    qly.page.open('/pages/my/balance/save')
}
</script>
<style scoped lang="scss">
.header-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 18rpx;
}
.btns-box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 24rpx;
}
.red-text{
    margin-top: 12rpx;
}
.update-box{
    width: 120rpx;
    height: 120rpx;
    background-color: #5572f0;
    color: #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
